<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>
<!-- 商家后台 查询人员构成 -->
<apes-content>
  <apes-card [apesBordered]="false">

    <!-- 饼图 -->
    <div apes-row [apesGutter]="16">
      <!-- 年龄占比 -->
      <div apes-col [apesSm]="10" [apesMd]="8">
        <apes-card  [apesTitle]="'年龄占比'" [apesBodyStyle]="{'padding.px': 24}"
                   class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [label]="false" [data]="yearPieData"
                    [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>
      <!-- 性别占比 -->
      <div apes-col [apesSm]="10" [apesMd]="8">
        <apes-card  [apesTitle]="'性别占比'" [apesBodyStyle]="{'padding.px': 24}"
                   class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [label]="false" [data]="sexPieData" [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>
      <!-- 全职、兼职 -->
      <div apes-col [apesSm]="10" [apesMd]="8">
        <apes-card [apesTitle]="'全职和兼职占比'" [apesBodyStyle]="{'padding.px': 24}"
                   class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [label]="false"  [data]="jobClassData" [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>
      <!-- 学历占比 -->
      <div apes-col [apesSm]="24" [apesMd]="12">

        <apes-card  [apesTitle]="'学历占比'" [apesBodyStyle]="{'padding.px': 24}"
                   class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="400" [inner]="0" [lineWidth]="1" [label]="false" [data]="educationData"
                    [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>
      <!-- 人员类型占比 -->
      <div apes-col [apesSm]="24" [apesMd]="12">
        <apes-card  [apesTitle]="'人员类型占比'" [apesBodyStyle]="{'padding.px': 24}"
                   class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="400" [inner]="0" [lineWidth]="1" [label]="false" [data]="postGroupData" [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>

    </div>
  </apes-card>
</apes-content>


